<template>
  <div class="snatchBills">
    <div class="snatchBillsT ajc">
      <p>抢单页面</p>
    </div>
    <div  v-if="workData" class="billsInfo wn">
      <div class="publicT ac">
        <img src="../assets/gg.png" />
        <p>手艺网公告:</p>
        <p>发布公告信息了解最新动态！</p>
      </div>
      <div class="billsC">
        <div>
          <p>
            <span>项目名称</span>
            <span>{{workData.title}}</span>
          </p>
          <p>
            <span>详细地址</span>
            <span>{{workData.address}}</span>
          </p>
          <p>
            <span>联系人</span>
            <span>{{workData.name}}</span>
          </p>
          <p>
            <span>联系电话</span>
            <span>
              <p><span v-if="isShow">{{workData.phone}}</span><span v-else>{{workData.phone.slice(0,7)}}****</span></p>
              <p style="color: #fff" @click="isShow=!isShow"><span v-if="isShow">隐藏号码</span><span v-else>查看完整号码</span></p>
            </span>
          </p>
        </div>
        <div>联系我时：请说明是在“手艺网”上看到的</div>
      </div>
      <div class="workInfo">
        <p>
          <span>招工详情</span>
        </p>
        <p>{{workData.msg}}</p>
        <p class="bt">
          <img v-for="(item,index) in workData.images" :key="index" :src="'http://sza.hzlyzhenzhi.com/'+item" />
        </p>
      </div>
      <div class="attention">
        <p>
          <span>温馨提示：</span>此信息由手艺网实名用户提供，但联系时仍需要注意识别信息真假，
          <span>防骗指南。</span>如果发现此信息不真实，请
          <span>立即举报</span>。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id:null,
      workData: null,
      isShow: false
    };
  },
  created() {
    this.$parent.showTabbar = true;
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.$axios({
        url: 'decoration/release/' + this.id,
        method: 'get'
      }).then(res => {
        console.log(res)
        if (res.data.code = 200) {
          console.log(res)
          this.workData = res.data.data
        }
      })
    }
  },
  methods: {}
};
</script>

<style lang="less">
.snatchBillsT {
  font-size: 16px;
  padding: 10px 0;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    font-size: 16px;
    color: #fff;
  }
}
.publicT {
  box-shadow: 2px 2px 1px #ddd;
  background-color: #fff;
  margin-top: 10px;
  padding: 7px 5px;
  border-radius: 5px;
  img {
    width: 2rem;
    height: 1.6rem;
    padding-right: 5px;
  }
  p {
    font-size: 16px;
  }
  p:last-child {
    color: #797878;
  }
}
.billsC {
  box-shadow: 2px 2px 1px #ddd;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 10px;
  div:first-child {
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      span {
        font-size: 15px;
      }
      &:not(:last-child) {
        span:first-child {
          font-weight: bold;
        }
        span:last-child {
          color: #f3864b;
        }
      }
    }
    p:last-child {
      span:last-child {
        display: flex;
        p {
          border: 0;
          padding: 5px;
        }
        p:last-child {
          background-image: linear-gradient(0deg, #ea1d0f 0%, #f54621 100%);
          border-radius: 5px;
          font-size: 15px;
          color: #fff;
        }
      }
    }
  }
  div:last-child {
    color: #f37b3a;
    padding: 10px;
  }
}
.workInfo {
  box-shadow: 2px 2px 1px #ddd;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
  p:first-child {
    padding-left: 2px;
    display: flex;
    span {
      font-size: 15px;
      padding: 3px 10px;
      background-image: linear-gradient(0deg, #1681e4 0%, #4a92f8 100%);
      border-radius: 3px;
      color: #fff;
    }
  }
  p:nth-child(2) {
    padding: 10px 0;
  }
  p:last-child {
    width: 100%;
    img {
      width: 32%;
      height: 5.9rem;
      border-radius: 5px;
    }
  }
}
.attention {
  box-shadow: 2px 2px 1px #ddd;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  margin-bottom: 60px;
  p {
    font-size: 16px;
    span {
      color: #eb2617;
      font-size: 16px;
    }
  }
}
</style>